<style>
</style>
<template>
    <ly-page>
        <ly-navi title="近期选择器"></ly-navi>
        <ly-page-content>
            <el-divider content-position="left">默认</el-divider>
            <ly-near-picker v-model="date" ></ly-near-picker>
            <el-divider content-position="left">隐藏选项</el-divider>
            <ly-near-picker v-model="date" default="7d" hide-options="12h,24h,yesterday"></ly-near-picker>
            <el-divider content-position="left">changed时间</el-divider>
            <ly-near-picker v-model="date" @changed="onDateChanged"></ly-near-picker>
            <ly-tip v-mt>初始化后也会触发一次</ly-tip>
            <div style="width: 100px;height: 100px" v-loading="loading">

            </div>
            <ly-code-view>
                <pre v-pre>
<ly-near-picker v-model="date" hide-options="12h,24h" v-on:changed="onDateChanged"></ly-near-picker>
                </pre>
            </ly-code-view>
            <ly-markdown>
              <pre v-pre>
## `ly-near-picker`

#### Attributes

| 属性名  |说明   | 类型|可选值|默认值|
| ------------ | ------------ |------------ |------------ |------------ |
|  v-model | 绑定值	 |object |-	|-	|
|  start_time| 开始时间对应key	  |string |-	|-|
|  end_time | 结束时间对应 key	  |string	|-|-|
|  default | 默认选项 |string |12h,24h,yesterday,7d,14d,30d,near,customer	|12h	|
|  hide-options | 隐藏选项	  |string |同上	|-	|

#### Event

| 事件名  |说明   | 参数|
| ------------ | ------------ |------------ |
| changed | 选中改变是触发,注意:`初始化后也会触发一次`	 |object |

                  </pre>
            </ly-markdown>

        </ly-page-content>

    </ly-page>
</template>
<script>
    Rap.define("", [], function () {
        return {
            data: function () {
                return {
                    date:{},
                    loading:false
                }
            },
            mounted: function () {
//
            },
            methods: {
                onDateChanged:function () {
                    var me=this;
                   me.loading=true;
                    setTimeout(function () {
                        me.loading=false;
                    },3000)
                }
            }
        }
    })
</script>